<template>
  <div class="haha">
    <div class="breadcrumb">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <a @click="toIndex">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <a @click="goNext">发布记录</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <a>记录详情</a>
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="detail">
      <div class="details">
        <div v-if="infoState === 1" class="hint hint1">发布中</div>
        <div v-if="infoState === 2" class="hint hint2">待生效</div>
        <div v-if="infoState === 3" class="hint hint4">已结束</div>
        <div v-if="infoState === 4" class="hint hint3">已撤回</div>
        <div v-if="infoState === 5" class="hint hint4">已删除</div>
        <div class="details-box">
          <div class="title">发布名称:</div>
          <div class="title-name">{{ infoName }}</div>
        </div>
        <div class="details-box">
          <div class="title">发布有效期:</div>
          <div v-if="releaseInfoTimingVO.length === 0" class="content">{{ dayValidTrem }}</div>
          <div v-else class="content">{{ validTrem }}</div>
        </div>
        <div class="details-box">
          <div class="title">发布频率:</div>
          <div v-if="releaseInfoTimingVO.length === 0" class="content">
            {{ rate }}
          </div>
          <div v-else class="content" style="width: 200px">
            <div v-if="releaseInfoTimingVO.length > 1">
              <Popover
                :get-popup-container="
                  triggerNode => {
                    return triggerNode.parentNode || document.body;
                  }
                "
                trigger="hover"
                class="content-hover"
              >
                <template #content>
                  <div v-for="item in releaseInfoTimingVO" :key="item.id">
                    <span v-if="item.dayOfWeek === 1">周一: </span>
                    <span v-if="item.dayOfWeek === 2">周二: </span>
                    <span v-if="item.dayOfWeek === 3">周三: </span>
                    <span v-if="item.dayOfWeek === 4">周四: </span>
                    <span v-if="item.dayOfWeek === 5">周五: </span>
                    <span v-if="item.dayOfWeek === 6">周六: </span>
                    <span v-if="item.dayOfWeek === 7">周日: </span>
                    <span
                      >{{ item.timingPartStart.substr(0, 5) }} -
                      {{ item.timingPartStop.substr(0, 5) }}</span
                    >
                    <span></span>
                  </div>
                </template>
                <div>
                  {{ rate }}
                  <span v-if="releaseFrequency === 1">{{ week }}</span>
                  <span
                    >{{ releaseInfoTimingVO[0].timingPartStart.substr(0, 5) }}-{{
                      releaseInfoTimingVO[0].timingPartStop.substr(0, 5)
                    }}...</span
                  >
                </div>
              </Popover>
            </div>
            <div v-else>
              {{ rate }}
              <span v-if="releaseFrequency === 1">{{ week }}</span>
              <span>
                {{ timingPartStart }}
                -
                {{ timingPartStop }}
              </span>
            </div>
          </div>
        </div>
        <div class="details-box">
          <div class="title">发布人:</div>
          <div class="content">{{ releaseUserName }}</div>
        </div>
        <div class="details-box">
          <div class="title">发布时间:</div>
          <div class="content">{{ createTime }}</div>
        </div>
        <div v-if="infoType !== 3" class="details-box">
          <div class="title">发布描述:</div>
          <div class="content">{{ infoDesc }}</div>
        </div>
        <div class="details-box">
          <div class="title">发布内容:</div>
          <div v-if="infoType === 1" class="content imgbox">
            <div v-for="(item, index) in infoTypeUrl" :key="index">
              <img
                v-if="item.url.substr(item.url.length - 1) !== '4'"
                class="cover"
                :src="item.url"
                @click="lookPhoto(item.url, item.type)"
              />
              <video
                v-else
                class="video cover"
                :src="item.url"
                @click="lookPhoto(item.url, item.type)"
              ></video>
            </div>
          </div>
          <div v-if="infoType === 2" class="exhibition-Pdf">
            <div v-for="(item, index) in pageList" :key="item.index">
              <img v-if="item.state" :class="item.state ? 'pdf-img' : null" :src="item.url" />
              <div class="car">
                <div v-if="item.state" class="pager">
                  <div
                    class="pager-left"
                    :class="currentPage === 1 ? 'prohibit' : null"
                    @click="currentPage !== 1 ? pageReduce(index) : null"
                  >
                    <i class="ifont-wid-Calendar_icon_month_left"></i>
                  </div>
                  <div class="number">{{ currentPage }}/{{ filePage }}</div>
                  <div
                    class="pager-right"
                    :class="currentPage === filePage ? 'prohibit' : null"
                    @click="currentPage !== filePage ? pageAdd(index) : null"
                  >
                    <i class="ifont-wid-Calendar_icon_month_right"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="infoType === 3" class="content" style="color: #666666">
            <!-- <div class="content text text-title" v-html="infoName"></div> -->
            <div class="content text" v-html="releaseArticleVO.articleContent"></div>
          </div>
          <div v-if="infoType === 0" class="content video" style="color: #666666">
            <video :src="infoTypeUrl[0]" @click="lookVideo"></video>
          </div>
        </div>
        <div v-if="infoType === 3" class="details-box">
          <div class="title">展示封面:</div>
          <div class="content">
            <img
              class="showcover"
              :src="thumbnailUrl"
              alt=""
              @click="lookPhoto(thumbnailUrl, 'img')"
          /></div>
        </div>
        <div v-if="infoType === 3" class="flex boxaa">
          <a
            v-for="(item, index) in releaseArticleVO.annex"
            :key="index"
            class="file"
            :class="index === 3 ? 'no-right' : null"
            :href="item.documentUrl"
            :download="item.documentName"
          >
            <i
              v-if="item.documentFormat === 'doc' || item.documentFormat === 'docx'"
              class="ifont-wid-appendix_icon_word"
            ></i>
            <i v-else-if="item.documentFormat === 'pdf'" class="ifont-wid-popup_icon_pdf"></i>
            <i v-else-if="item.documentFormat === 'txt'" class="ifont-wid-popup_icon_txt1"></i>
            <i
              v-else-if="
                item.documentFormat === 'png' ||
                item.documentFormat === 'jpeg' ||
                item.documentFormat === 'jpg' ||
                item.documentFormat === 'bmp'
              "
              class="ifont-wid-a-appendix_icon_png2"
            ></i>
            <i
              v-else-if="item.documentFormat === 'ppt' || item.documentFormat === 'pptx'"
              class="ifont-wid-popup_icon_ppt"
            ></i>
            <i
              v-else-if="item.documentFormat === 'xlsx' || item.documentFormat === 'xls'"
              class="ifont-wid-popup_icon_xlsx"
            ></i>
            <i
              v-else-if="item.documentFormat === 'mp4' || item.documentFormat === 'avi'"
              class="ifont-wid-appendix_icon_mp4"
            ></i>
            <i v-else class="ifont-wid-popup_icon_tongyong"></i>
            <span class="file-name">{{ item.documentName }}.{{ item.documentFormat }}</span></a
          >
        </div>
      </div>
      <div class="detail-public public1">
        <div class="public-title">
          <div class="left-title"></div>
          <span class="left-count">设备或应用平台列表</span>
        </div>
        <div class="facility">
          <div class="itemBox">
            <div v-for="(item, index) in releaseInfoEquipments" :key="index">
              <!-- 发布位置类型类型;设备1，应用平台2 -->
              <div v-if="item.positionType === 2" class="item">
                <div class="rights">泉城e学:</div>
                <div class="right">通知公告 </div>
              </div>
              <div v-else class="item">
                <div class="right" :title="item.equipmentTypeName">{{
                  item.equipmentTypeName
                }}</div>
                <div class="right-two" :title="item.className">{{ item.className }}</div>
                <!-- <div class="right">{{ item.name }}</div> -->
                <div class="right" :title="item.position">{{ item.position }}</div>
                <!-- <div class="functions">{{ item.funcModuleName }}</div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-public public2">
        <div class="public-title">
          <div class="left-title"></div>
          <span class="left-count">发布人信息</span>
        </div>
        <div class="person">
          <div
            >姓名:<span>{{ releaseUserName }}</span></div
          >
          <div
            >联系方式:<span>{{ releaseUserPhone }}</span></div
          >
          <div
            >所在部门:<span>{{ releaseUserDepartment }}</span></div
          >
        </div>
      </div>
      <div class="detail-public public3">
        <div class="public-title">
          <div class="left-title"></div>
          <span class="left-count">操作记录</span>
        </div>
        <div class="record">
          <div v-for="(item, index) in releaseOperationLogVO" :key="index" class="recordtip">
            <div class="qiu"></div>
            <div>【{{ item.createUserName }}】</div>
            <div v-if="item.oprationType === 1" class="type">发布信息</div>
            <div v-if="item.oprationType === 2" class="type">删除信息</div>
            <div v-if="item.oprationType === 3" class="type">编辑信息</div>
            <div v-if="item.oprationType === 4" class="type">撤回信息</div>
            <div>{{ item.createTime }}</div>
          </div>
        </div>
      </div>
    </div></div
  >
  <!-- 视频详情弹窗 -->
  <my-dialog
    class="preview-video"
    :dialog-state="previewVideoVisible.visible"
    :dialog-title="previewVideoVisible.title"
    :dialog-width="previewVideoVisible.width"
    :icon-type="previewVideoVisible.default"
    :footer="false"
    @handleCancel="previewVideoVisible.visible = false"
  >
    <template #location>
      <video v-if="previewVideoVisible.visible" class="video" :src="imgDialogUrl" controls></video>
      <video v-else class="video" :src="imgDialogUrl"></video>
    </template>
  </my-dialog>
  <!-- 图片弹窗 -->
  <my-dialog
    :dialog-state="imgDialog.visible"
    :dialog-title="imgDialog.title"
    :dialog-width="imgDialog.width"
    :icon-type="imgDialog.default"
    :footer="false"
    class="preview-photo"
    @handleCancel="imgDialog.visible = false"
  >
    <template #location>
      <img alt="example" style="width: 100%; max-height: 300px" :src="imgDialogUrl" />
    </template>
  </my-dialog>
</template>

<script setup>
import { reactive, ref, computed, onMounted } from 'vue';
import MyDialog from '@/components/dialog/index.vue';
import moment from 'moment';
import { Popover } from 'ant-design-vue';
import { getReleaseInfo } from '@/api/user';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
const store = useStore();

const router = useRouter();
const validPeriodStart = ref('');
const validPeriodStop = ref('');
const releaseFrequency = ref();
const releaseUserName = ref();
const infoDesc = ref();
const createTime = ref();
const infoType = ref();
const infoTypeUrl = ref();
const releaseUserPhone = ref();
const releaseUserDepartment = ref();
const releaseOperationLogVO = ref([]);
const infoName = ref();
const releaseInfoEquipments = ref([]);
const infoState = ref();
const releaseArticleVO = ref({});
const route = useRoute();
const thumbnailUrl = ref();
const isForever = ref('');
let imgDialogUrl = ref(''); // 预览图片地址
let filePage = ref(0); // pdf转换img的数量
let currentPage = ref(1); // pdf转换img的当前页
let pageList = ref([]); // 文档数据
let lookVideoUrl = ref(''); //  s视频详情地址
const releaseInfoTimingVO = ref([]); // 发布频率
let timingPartStart = ref('');
let timingPartStop = ref('');
getReleaseInfo(route.query.id)
  .then(res => {
    let records = res.data.data;
    infoName.value = res.data.data.infoName;
    validPeriodStart.value = moment(res.data.data.validPeriodStart).format('YYYY-MM-DD HH:mm');
    validPeriodStop.value = moment(res.data.data.validPeriodStop).format('YYYY-MM-DD HH:mm');
    releaseFrequency.value = res.data.data.releaseFrequency;
    releaseUserName.value = res.data.data.releaseUserName;
    createTime.value = res.data.data.createTime;
    infoDesc.value = res.data.data.infoDesc;
    isForever.value = res.data.data.isForever;
    infoType.value = res.data.data.infoType;
    releaseInfoTimingVO.value = res.data.data.releaseInfoTimingVO;
    timingPartStart.value =
      res.data.data.releaseInfoTimingVO.length > 0
        ? res.data.data.releaseInfoTimingVO[0].timingPartStart.substr(0, 5)
        : '';
    timingPartStop.value =
      res.data.data.releaseInfoTimingVO.length > 0
        ? res.data.data.releaseInfoTimingVO[0].timingPartStop.substr(0, 5)
        : '';
    if (infoType.value === 1) {
      let data = [];
      res.data.data.infoImageAndVideoUrlList.forEach(item => {
        let urlFirst = item.url.substring(0, item.url.lastIndexOf('.'));
        let three = item.url.substring(item.url.lastIndexOf('.'));
        let firstUrl = item.url.substring(0, 89);
        let name = urlFirst.slice(89);
        data.push({
          type: item.url.substr(item.url.length - 1, 1) !== '4' ? 'img' : 'video',
          url:
            item.url.substr(item.url.length - 1, 1) !== '4' ||
            name.indexOf('&') !== -1 ||
            name.indexOf('@') !== -1 ||
            name.indexOf('+') !== -1
              ? firstUrl + encodeURIComponent(name) + three
              : item.url
        });
      });

      infoTypeUrl.value = data;
    }
    if (infoType.value === 0) {
      infoTypeUrl.value = res.data.data.infoTypeUrl;
      lookVideoUrl.value = res.data.data.infoTypeUrl[0];
    }
    releaseUserPhone.value = res.data.data.releaseUserPhone;
    releaseUserDepartment.value = res.data.data.releaseUserDepartment;
    releaseOperationLogVO.value = res.data.data.releaseOperationLogVO;
    releaseInfoEquipments.value = res.data.data.releaseInfoPositions;
    infoState.value = res.data.data.infoState;

    if (infoType.value === 3) {
      let data = [];
      res.data.data.releaseArticleVO.annex.forEach(item => {
        let firstUrl = item.documentUrl.substring(0, item.documentUrl.lastIndexOf('_'));
        let three = item.documentUrl.substring(item.documentUrl.lastIndexOf('.'));
        let index = item.documentUrl.lastIndexOf('_');
        let escapeName = item.documentUrl.substring(index + 1, item.documentUrl.length);
        let indexs = escapeName.lastIndexOf('.');
        let names = escapeName.substring(0, indexs);
        // if (names.indexOf('&') !== -1 || names.indexOf('@') !== -1 || names.indexOf('+') !== -1) {
        //   names = encodeURIComponent(names);
        // }
        // let url = firstUrl + '_' + names + three;
        let url;
        if (names.indexOf('&') !== -1 || names.indexOf('@') !== -1 || names.indexOf('+') !== -1) {
          url = firstUrl + '_' + encodeURIComponent(names) + three;
        } else {
          url = firstUrl + '_' + names + three;
        }
        data.push({
          articleId: item.articleId,
          createTime: item.createTime,
          createUserId: item.createUserId,
          createUserName: item.createUserName,
          documentFormat: item.documentFormat,
          documentName: item.documentName,
          documentUrl: url,
          id: item.id,
          isDelete: item.isDelete,
          schoolId: item.schoolId,
          tenantId: item.tenantId,
          updateTime: item.updateTime,
          updateUserId: item.updateUserId,
          updateUserName: item.updateUserName
        });
      });
      releaseArticleVO.value.annex = data;
      let ones = res.data.data.thumbnailUrl.substring(
        0,
        res.data.data.thumbnailUrl.lastIndexOf('_')
      );
      let threes = res.data.data.thumbnailUrl.substring(
        res.data.data.thumbnailUrl.lastIndexOf('.')
      );
      let indexs = res.data.data.thumbnailUrl.lastIndexOf('_');
      let escapeNames = res.data.data.thumbnailUrl.substring(
        indexs + 1,
        res.data.data.thumbnailUrl.length
      );
      let indexss = escapeNames.lastIndexOf('.');
      let namess = escapeNames.substring(0, indexss);
      if (namess.indexOf('#') !== -1) {
        namess = encodeURIComponent(namess);
      }
      let urls = ones + '_' + namess + threes;
      thumbnailUrl.value = urls;
      releaseArticleVO.value.articleContent = res.data.data.releaseArticleVO.articleContent;
    }

    if (infoType.value === 2) {
      // 文档
      let fileUrl = records.documentVO.infoDocumentUrl; // 文档url
      let index = fileUrl.lastIndexOf('.');
      let pdfImg = fileUrl.substring(0, index);
      let urlFirst = fileUrl.substring(0, fileUrl.lastIndexOf('.'));
      let firstUrl = fileUrl.substring(0, 89);
      let name = urlFirst.slice(89);

      let dataList = [];
      for (let index = 0; index < records.documentVO.filePage; index++) {
        let i = index + 1;
        dataList.push({
          state: false,
          url: firstUrl + encodeURIComponent(name) + '/' + i + '.jpg'
        });
      }
      pageList.value = dataList;
      filePage.value = records.documentVO.filePage;
      pageList.value[0].state = true;
    }
  })
  .catch(err => {
    console.log(err);
  });
// 频率
const rate = computed(() => {
  if (releaseFrequency.value === 1) {
    return '每周';
  } else {
    return '每天';
  }
});
const week = computed(() => {
  switch (releaseInfoTimingVO.value[0].dayOfWeek) {
    case 1:
      return '周一:';
    case 2:
      return '周二:';
    case 3:
      return '周三:';
    case 4:
      return '周四:';
    case 5:
      return '周五:';
    case 6:
      return '周六:';
    default:
      return '周日:';
  }
});
// 有效期限
const validTrem = computed(() => {
  if (isForever.value === 0) {
    return `
      ${moment(validPeriodStart.value).format('YYYY-MM-DD ')}
       至
      ${moment(validPeriodStop.value).format('YYYY-MM-DD')}`;
  } else {
    return `${moment(validPeriodStart.value).format('YYYY-MM-DD ')} 至  永久`;
  }
});
// 立即发布
const dayValidTrem = computed(() => {
  if (isForever.value === 0) {
    return `
      ${moment(validPeriodStart.value).format('YYYY-MM-DD HH:mm ')}
       至
      ${moment(validPeriodStop.value).format('YYYY-MM-DD HH:mm ')}`;
  } else {
    return `${moment(validPeriodStart.value).format('YYYY-MM-DD HH:mm')} 至  永久`;
  }
});
// 分页减
function pageReduce(item) {
  pageList.value.forEach(item => {
    item.state = false;
  });
  currentPage.value = item;
  pageList.value[item - 1].state = true;
}
// 分页加
function pageAdd(item) {
  pageList.value.forEach(item => {
    item.state = false;
  });
  pageList.value[item + 1].state = true;
  currentPage.value = item + 2;
}
const flag = 1;
// 预览视频弹窗
const previewVideoVisible = reactive({
  title: '图像预览',
  default: 'default',
  visible: false,
  width: '823px'
});
// 查看视频详情
function lookVideo() {
  previewVideoVisible.title = '视频预览';
  previewVideoVisible.visible = true;
}
// 查看图片弹窗
const imgDialog = reactive({
  title: '图像预览',
  default: 'default',
  visible: false,
  width: '400px'
});
// 查看图片详情
function lookPhoto(value, type) {
  imgDialogUrl.value = value;
  if (type === 'img') {
    imgDialog.visible = true;
  } else {
    previewVideoVisible.visible = true;
  }
}
function toIndex() {
  router.push({
    path: '/'
  });
}
function goNext() {
  router.push({
    path: '/service/record'
  });
}
</script>
<style lang="less" scoped>
.haha {
  // padding: 13px 120px 24px 120px;
  padding-bottom: 20px;
  background: #f2f2f2;
  min-height: 100%;
  height: auto;
  min-width: 1200px;
  .breadcrumb {
    width: 1200px;
    margin: 0 auto 14px;
  }
}

/deep/ .micro-ant-modal-body {
  padding: 36px !important;
}
.detail {
  // width: 100%;
  width: 1200px;
  margin: 0 auto;
  padding: 24px;
  background: #ffffff;
  border-radius: 5px;
  .details {
    position: relative;
    background: #ffffff;
    border: 1px solid #e1dddd;
    border-radius: 5px;
    padding: 24px 24px 4px 0;
    // width: 968px;
    .hint {
      width: 78px;
      line-height: 32px;
      border-radius: 50px 0px 0px 50px;
      text-align: center;
      position: absolute;
      right: 0;
    }
    .hint1 {
      background: rgba(86, 214, 183, 0.16);
      color: #56d6b7;
    }
    .hint2 {
      background: rgba(214, 170, 86, 0.16);
      color: var(--themecolor);
    }
    .hint3 {
      background: rgba(254, 143, 143, 0.16);
      color: #fe8f8f;
    }
    .hint4 {
      background: rgba(153, 153, 153, 0.16);
      color: #999999;
    }
    .details-box {
      line-height: 24px;
      margin-bottom: 16px;
      padding-left: 24px;
      .content-hover {
        text-align: left;
      }
      .title {
        margin-right: 16px;
        margin-bottom: 4px;
        width: 110px;
        color: #666666;
        font-size: 14px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
      }
      .text {
        background: #f8f8f8;
        padding: 16px;
        table {
          // border: 1px solid red;
          // background: red !important;
          tbody {
            tr {
              // border: 1px solid red !important;
              th {
                // background: red !important;
              }
            }
          }
        }
      }
      .title-name {
        font-size: 16px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        // width: 726px;
        color: #222222;
      }
      .content {
        font-size: 16px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        flex: 1;
        word-wrap: break-word !important;
        .showcover {
          width: 160px;
          height: 120px;
        }
      }
      .video {
        width: 160px;
        height: 120px;
        background: #f8f8f8;
        border-radius: 5px;
        video {
          height: 100%;
          width: 100%;
        }
      }
      .exhibition-Pdf {
        width: 876px;
        padding: 10px;
        background: #f8f8f8;
        max-height: 1264px;
        overflow: auto;
        &::-webkit-scrollbar {
          width: 6px;
        }
        &::-webkit-scrollbar-thumb {
          background: rgba(20, 20, 20, 0.2);
          border-radius: 3px;
        }
        &::-webkit-scrollbar-track {
          background: transparent;
        }

        .pdf-img {
          width: 844px;
          margin: auto;
          max-height: 100%;
        }
        .pager {
          display: flex;
          justify-content: center;
          margin-top: 19px;
          .number {
            font-size: 14px;
            font-family: Source Han Sans CN, Source Han Sans CN-Regular;
            font-weight: 400;
            color: #666666;
            margin: 0 24px;
          }
          .prohibit {
            cursor: no-drop !important;
          }
          .pager-left,
          .pager-right {
            cursor: pointer;
            width: 20px;
            height: 20px;
            background: #e1dddd;
            border-radius: 50%;
            i {
              margin: 3px;
              color: #333333;
            }
          }
        }
      }
      .imgbox {
        display: flex;
        flex-wrap: wrap;
        max-height: 150px;
        overflow-y: auto;
        img {
          width: 160px;
          height: 120px;
          margin-right: 20px;
          margin-bottom: 20px;
        }
        video {
          width: 160px;
          height: 120px;
          margin-right: 20px;
          margin-bottom: 20px;
        }
      }
    }
    .file-name {
      width: 169px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .no-right {
    // margin-right: 0px !important;
  }
  .file {
    width: 218px;
    line-height: 32px;
    background: #f8f8f8;
    color: #666666;
    margin-right: 16px;
    margin-bottom: 8px;
    padding: 4px 7px;
    display: flex;
    align-items: center;
    .ifont-wid-appendix_icon_word {
      width: 26px;
      font-size: 32px;
      height: 32px;
      color: #4a8dff;
      margin-right: 10px;
    }
    .ifont-wid-popup_icon_pdf {
      width: 26px;
      font-size: 32px;
      height: 32px;
      color: #fe8f8f;
      margin-right: 10px;
    }
    .ifont-wid-popup_icon_ppt {
      width: 26px;
      font-size: 32px;
      height: 32px;
      color: #ff7861;
      margin-right: 10px;
    }
    .ifont-wid-popup_icon_xlsx {
      width: 26px;
      font-size: 32px;
      height: 32px;
      color: #56d6b7;
      margin-right: 10px;
    }
    .ifont-wid-popup_icon_tongyong {
      width: 26px;
      font-size: 32px;
      height: 32px;
      color: #e4b778;
      margin-right: 10px;
    }
    .ifont-wid-appendix_icon_mp4 {
      width: 26px;
      font-size: 32px;
      height: 32px;
      color: #c386f0;
      margin-right: 10px;
    }
    .ifont-wid-popup_icon_txt1 {
      width: 26px;
      font-size: 32px;
      height: 32px;
      color: #4a8dff;
      margin-right: 10px;
    }
    .ifont-wid-a-appendix_icon_png2 {
      width: 26px;
      font-size: 32px;
      height: 32px;
      color: #6ccbff;
      margin-right: 10px;
    }
  }
  .detail-public {
    margin-top: 16px;
    background: #ffffff;
    border: 1px solid #e1dddd;
    border-radius: 5px;
    padding: 24px 24px 8px 24px;
    .public-title {
      display: flex;
      align-items: center;
      margin-bottom: 24px;
      .left-count {
        font-family: Source Han Sans CN, Source Han Sans CN-Medium;
        color: #222222;
        font-size: 18px;
        font-weight: 500;
        margin-left: 8px;
      }
      .left-title {
        width: 3px;
        height: 16px;
        background: var(--themecolor);
        border-radius: 4px;
      }
    }
    .facility {
      display: flex;
      flex-wrap: wrap;
      max-height: 84px;
      overflow-y: auto;
      .itemBox {
        margin-bottom: 8px;
        display: flex;
        flex-wrap: wrap;
        .item {
          background: #f8f8f8;
          padding: 0 16px;
          line-height: 48px;
          width: 438px;
          margin-right: 13px;
          margin-bottom: 8px;
          display: flex;
          .rights {
            margin-right: 2.5%;
          }
          .right {
            margin-right: 1%;
            width: 29.48%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .right-two {
            margin-right: 1%;
            width: 18%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .functions {
            width: 24.24%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
      .itemBox:nth-of-type(even) {
        margin-left: 20px;
      }
    }
    .person {
      display: flex;
      margin-bottom: 24px;
      span {
        margin-left: 8px;
        color: #666666;
        font-weight: 400;
      }
      div {
        margin-right: 16px;
        color: #222222;
        font-weight: 400;
      }
    }
    .record {
      .recordtip {
        display: flex;
        align-items: center;
        color: #666666;
        line-height: 24px;
        .qiu {
          width: 8px;
          height: 8px;
          background: #999999;
          border-radius: 50%;
          margin-right: 8px;
        }
        .type {
          margin: 10px;
        }
      }
    }
  }
  /deep/.ant-image-img {
    width: 160px;
    height: 120px;
  }

  /deep/.ant-image-preview-img-wrapper::before {
    content: none !important;
  }
  .ant-image-preview-img {
    margin: auto !important;
  }
}
.text-title {
  text-align: center;
  border-bottom: 1px solid #e1dddd;
  font-size: 18px;
}
.boxaa {
  width: 100%;
  margin: 0 24px;
  flex-wrap: wrap;
  // margin-left: 24px;
}
</style>
<style lang="less" scoped>
.text {
  /deep/ tr {
    border: 1px solid #ccc !important;
    td {
      border-right: 1px solid #ccc !important;
    }
  }
  /deep/ th {
    background: #f1f1f1;
  }
  /deep/ th {
    border-right: 1px solid #ccc !important;
  }
}
/deep/.preview-video {
  .micro-ant-modal-body {
    padding: 0px !important;
  }
  .video {
    max-width: 100% !important;
    max-height: 526px !important;
    width: 100% !important;
  }
}
.preview-video {
  .video {
    max-width: 100% !important;
    max-height: 526px !important;
    width: 100% !important;
  }
}
/deep/ .preview-photo {
  .micro-ant-modal-body {
    padding: 0px !important;
  }
  .micro-ant-modal-footer {
    padding: 0px !important;
    border-top: 0px solid #ffffff !important;
  }
}
/* .text >>> table >>> tbody >>> tr {
  border: 1px solid red !important;
}
.text > th {
  background: red !important;
} */
.video-cover {
}
</style>
